<template>
	<view class="wrap">
		<view class="u-card-wrap">
			<u-card :title="bbsListData.contentType" :sub-title="bbsListData.createTime" :thumb="thumb" :padding="padding" :border="border">
				<view class="" slot="body">
					<view class="mainTitle" style="font-size: 18px; font-weight: 600">{{ bbsListData.title }}</view>
					<view class="u-bbslabel" style="margin: 5px 0">
						<u-tag :text="bbsListData.contentType" type="primary" size="mini" style="margin-right: 5px" />
						<u-tag :text="bbsListData.businessModularType" type="primary" size="mini" />
					</view>
					<view class="u-content">
						<u-parse :html="bbsListData.content"></u-parse>
					</view>
				</view>
				<view class="" slot="foot">
					<u-icon name="edit-pen-fill" size="34" label="评论" @click="pushDiscuss"></u-icon>
					<u-icon name="trash-fill" size="34" label="删除" style="margin-left: 30px" @click="deleteMobel(bbsListData.bbsId, true)"></u-icon>
				</view>
			</u-card>
		</view>
		<view class="comment" v-for="(res, index) in commentListBbs" :key="index">
			<!-- <view class="left"><image :src="res.url" mode="aspectFill"></image></view> -->
			<view class="left"><u-avatar :text="res.createUserName" bg-color="#0A98D5" size="mini" style="color: #ffffff"></u-avatar></view>
			<view class="right">
				<view class="top">
					<view class="name">{{ res.createUserName }}</view>
					<!-- <view class="like" :class="{ highlight: res.isLike }">
						<view class="num">{{ res.likeNum }}</view>
						<u-icon v-if="!res.isLike" name="thumb-up" :size="30" color="#9a9a9a" @click="getLike(index)"></u-icon>
						<u-icon v-if="res.isLike" name="thumb-up-fill" :size="30" @click="getLike(index)"></u-icon>
					</view> -->
				</view>
				<view class="content"><u-parse :html="res.content"></u-parse></view>
				<view class="reply-box">
					<view class="item" v-for="(item, index) in res.replays" :key="index">
						<view class="username">{{ item.createUserName }} 回复 {{ item.parentCreateUserName }}</view>
						<view class="text"><u-parse :html="item.content"></u-parse></view>
						<view class="bottom" style="position: relative; font-size: 12px">
							{{ item.updateTime }}
							<view class="reply" style="position: absolute; right: 0; top: 0">
								<text @click="pushDiscuss(item.commentId)">回复</text>
								<text style="padding-left: 10px" @click="deleteMobel(item.commentId, false)">删除</text>
							</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					{{ res.createTime }}
					<view class="reply">
						<text @click="pushDiscuss(res.commentId)">回复</text>
						<text style="padding-left: 10px" @click="deleteMobel(res.commentId, false)">删除</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 功能菜单 -->
		<!-- 功能菜单 -->
		<u-popup  v-model="show"  mode="bottom" :closeable="closeable" :close-icon-pos="closeIconPos" :close="popClose"
			:open="popOpen"
			>
			<view style="padding: 16rpx;width: 100%;">
				<editor-bar class="editorBar" :item="item" :value="item.value" :disabled="item.disabled" :relation="item.relation" @value-change="fieldValueChange" type="replyType"></editor-bar>
				<view class="bottom" style="display: flex;margin-top: 20rpx;">
					<u-button type="primary" @click="subBbsCom(0)" style="width: 50%;">提交</u-button>
					<u-button type="warning" @click="subBbsCom(1)" style="width: 50%;">匿名提交</u-button>
				</view>					
			</view>
		</u-popup>
		<u-modal v-model="showDelete" :content="contentDelete" title="删除提示" :title-style="{ color: '#ED6717' }" :show-cancel-button="true" :mask-close-able="true" @confirm="isDelete"></u-modal>
		<!-- 评论内容为空时的提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { KmsSearchBbs, KmsDeleteBbs, KmsAddCommentBbs, KmsDeleteCommentBbs, KmsCommentListBbs } from '@/api/kms/bbs.js';
import EditorBar from '@/pages/kmsManagement/common/editorPl.vue';
import shmilyDragImage from '@/components/shmily-drag-image/shmily-drag-image.vue';
export default {
	data() {
		return {
			item:{
				"key": "content",
				"data": {
					"fieldId": 382,
					"formType": "textarea",
					"isNull": 1,
					"isDisabled": 0,
					"isUnique": 0,
					"inputTips": null,
					"label": 103,
					"type": 2,
					"fieldName": "content",
					"setting": [],
					"name": "内容",
					"options": null,
					"value": "",
					"fieldType": 1
				},
				"disabled": false,
				"value": "",
				"relation": {}
			},
			warp_top: 0,
			uf_top:'0px',
			msg_user: '',
			absolute: true,
			bellBage: [22, -16],
			title: '素胚勾',
			subTitle: '2020-05-15',
			thumb: '/static/kms/not-user.png',
			padding: 20,
			bottomSlot: true,
			border: true,
			Loop: null,
			list: [],
			show: false,
			content: '',
			commentList: [],
			bbsContent: null,
			mode: 'bottom',
			mask: true, // 是否显示遮罩
			closeable: true,
			closeIconPos: 'top-right',
			isClear: false,
			detail: '',
			replyType: 'reply',
			bbsId: '',
			pid: null,
			bbsListData: {},
			commentListBbs: [],
			// 帖子删除弹框
			showDelete: false,
			contentDelete: '确定删除该条社区帖子？',
			deleteId: '',
			deleteType: true, //true：帖子；false: 评论
		};
	},
	components: {
		EditorBar,
		shmilyDragImage,
	},
	computed: {
		...mapGetters(['kms']),
	},
	onLoad(option) {
		this.bbsId = option.bbsId;
		this.getbbsOnly();
		this.showComment();
		// this.getComment();
	},
	mounted() {
		let _this = this;
		let obj = uni.createSelectorQuery().select('.uf_umk')				
		obj.boundingClientRect(function (data) {
			_this.warp_top = data.top
		   }).exec()		
	},
	onShow() {},
	watch: {},
	methods: {
		fieldValueChange(data){
			this.msg_user = data.value;
		},
		// 获取焦点
		on_Focus(event){
			let _this = this;
			uni.getSystemInfo({
				success: function (res) {
					let sbh = uni.getSystemInfoSync().statusBarHeight;
					let _rpx = sbh/(uni.upx2px(100)/100) -20;
					_this.uf_top = (res.windowHeight +_rpx - event.detail.height - _this.warp_top) + 'rpx'
				},
			});
		},
		falseFocus() {
			this.show = false;
		},
		bbsToPath() {
			let params = {
				crmType: 'bbs',
			};
			uni.navigateTo({
				url: '/pages/kmsManagement/kmsFunList/bbs/publishBbs?params=' + encodeURIComponent(JSON.stringify(params)),
			});
		},
		bbschart() {
			uni.navigateTo({
				url: '/pages/kmsManagement/kmsFunList/bbs/bbsDetail',
			});
		},
		onEditorReady(editor) {
			// 准备编辑器
		},
		onEditorBlur() {}, // 失去焦点事件
		onEditorFocus() {}, // 获得焦点事件
		onEditorChange() {}, // 内容改变事件
		saveHtml: function (event) {
			alert(this.bbsContent);
		},
		change(val) {},
		// 跳转到全部回复
		toAllReply() {
			uni.navigateTo({
				url: '/pages/kmsManagement/kmsFunList/course/discussRedly',
			});
		},
		// 点赞
		getLike(index) {
			this.commentList[index].isLike = !this.commentList[index].isLike;
			if (this.commentList[index].isLike == true) {
				this.commentList[index].likeNum++;
			} else {
				this.commentList[index].likeNum--;
			}
		},
		//单个帖子
		getbbsOnly() {
			let self = this;
			let params = {
				bbsId: this.bbsId,
			};
			KmsSearchBbs(params).then((res) => {
				self.bbsListData = res.data;
				// self.showListData = res.data;
			});
		},
		// 评论列表
		pushDiscuss(pid) {
			this.detail = '';
			if (pid) {
				this.pid = pid;
			} else {
				this.pid = '';
			}
			this.show = true;
		},
		//添加评论(回复)
		addComment(num) {
			let self = this;
			var isAnonymousNum = num;
			if (this.detail == '') {
				return;
			}
			let params = {
				entity: {
					label: 103,
					resourceId: self.bbsId, //评论对象的id
					content: this.detail,
					pid: this.pid,
					isAnonymous: isAnonymousNum,
				},
			};
			KmsAddCommentBbs(params).then((res) => {
				self.showComment();
				self.show = false;
				this.msg_user = '';
			});
		},
		// 查看评论
		showComment() {
			let self = this;
			let params = {
				label: 103,
				resourceId: self.bbsId, //评论对象的id
				pid: '',
				page: 1,
				limit: 4,
			};
			KmsCommentListBbs(params).then((res) => {
				self.commentListBbs = res.data.list;
			});
		},
		checkVal(str) {
			if (str === null) {
				return true;
			} else {
				let num = 0,
					reg = /<p>(&nbsp;|&nbsp;\s+)+<\/p>|<p>(<br>)+<\/p>/g;
				while (num < str.length && str != '') {
					num++;
					let k = str.match(reg);
					if (k) {
						str = str.replace(k[0], '');
					}
				}
				return str == '';
			}
		},
		//提交bbs的评论
		subBbsCom(num) {
			this.detail = this.msg_user; //this.$refs.ffff.info_
			if (this.checkVal(this.detail)) {
				this.$refs.uToast.show({
					title: '请输入有效的内容',
					type: 'error',
					position: 'bottom',
				});
			} else {
				this.addComment(num);
			}
		},
		// 打开删除提示框
		deleteMobel(id, type) {
			this.showDelete = true;
			this.deleteId = id;
			this.deleteType = type;
			if (type) {
				this.contentDelete = '确定删除该条社区帖子？';
			} else {
				this.contentDelete = '确定删除该条社区评论？';
			}
		},
		isDelete() {
			if (this.deleteType) {
				this.deletebbs();
			} else {
				this.deleteComBbs();
			}
		},
		//删除论坛帖子
		deletebbs() {
			let self = this;
			let params = {
				bbsId: this.deleteId,
			};
			KmsDeleteBbs(params).then((res) => {
				uni.navigateTo({
					url: '/pages/kmsManagement/kmsFunList/bbs/bbsIndex',
				});
			});
		},
		//删除评论
		deleteComBbs() {
			let self = this;
			let params = {
				commentId: this.deleteId,
				label: 103,
			};
			KmsDeleteCommentBbs(params).then((res) => {
				self.showComment();
			});
		},
		addImage() {
			this.$refs.dragImage.addImage('');
		},
	},
};
</script>

<style  lang="scss" scoped>
.warp {
	height: 100%;
	margin-top: 255px;
}
.comment {
	display: flex;
	margin: 30rpx 0;
	.left {
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			background-color: #f2f2f2;
		}
	}
	.right {
		flex: 1;
		padding-left: 20rpx;
		font-size: 30rpx;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10rpx;
			.name {
				color: #5677fc;
			}
			.like {
				display: flex;
				align-items: center;
				color: #9a9a9a;
				font-size: 26rpx;
				.num {
					margin-right: 4rpx;
					color: #9a9a9a;
				}
			}
			.highlight {
				color: #5677fc;
				.num {
					color: #5677fc;
				}
			}
		}
		.content {
			margin-bottom: 10rpx;
		}
		.reply-box {
			background-color: rgb(242, 242, 242);
			border-radius: 12rpx;
			.item {
				padding: 20rpx;
				border-bottom: solid 2rpx $u-border-color;
				.username {
					font-size: 24rpx;
					color: #999999;
				}
			}
			.all-reply {
				padding: 20rpx;
				display: flex;
				color: #5677fc;
				align-items: center;
				.more {
					margin-left: 6rpx;
				}
			}
		}
		.bottom {
			margin-top: 20rpx;
			display: flex;
			font-size: 24rpx;
			color: #9a9a9a;
			.reply {
				color: #5677fc;
				margin-left: 10rpx;
			}
		}
	}
}
.fu-text {
	background-color: #fab6b6;
	margin: 20rpx 40rpx;
	height: 200rpx;
}
.bbs-title {
	border-top: 1rpx solid #eeeeee;
	border-bottom: 1rpx solid #eeeeee;
}
.bbs-btn {
	text-align: right !important;
}
.bell-index {
	display: flex;
	align-items: center;
}
.badge-bell {
	top: 22px !important;
	right: -16px !important;
}

.wrap {
	padding: 24rpx;
}

.u-row {
	margin: 10rpx 0;
}

.demo-layout {
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 8rpx;
}

.bg-purple {
	background: #d3dce6;
}

.bg-purple-light {
	background: #e5e9f2;
}

.bg-purple-dark {
	background: #99a9bf;
}
.log-unit {
	font-size: 35rpx;
	font-weight: 600;
}
.u-demo {
	padding-top: 0;
}

.u-card-wrap {
	padding: 1px;

	.u-card {
		margin: 0 0 15px !important;
	}
}

.u-body-item {
	font-size: 32rpx;
	color: #333;
	padding: 20rpx 10rpx;
}

.u-body-item image {
	width: 120rpx;
	flex: 0 0 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-left: 12rpx;
}
.editorBar {
	margin-bottom: 10px;
	margin-top: 36px;
}
.editorBar /deep/ .text {
	min-height: 70px !important;
}
</style>
